Angular-Universal 在導向Notfound Component時回傳404

參考連結

一般我們在使用Angular的時候，對於未知的URI我們會直接使用routes將其導向一個notfound component

app.module.ts

{ path: '**', redirectTo: 'notfound' }

但是這種情況下，回傳的status code是200，這對於SEO之類的東西非常不友善

為了解決這情況，我們要稍微修改一下

首先是server.ts

server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

將res變數傳下去，讓我們的NotFoundComponent可以修改response code

server.get('*', (req, res) => {
    res.render(indexHtml, { req, res, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

再來是我們的NotFoundComponent，引入必要的函數

import { isPlatformServer } from '@angular/common';
import { Component, OnInit, PLATFORM_ID } from '@angular/core';
import { Optional, Inject } from '@angular/core';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';

在constructor將response注入，並在serverside執行時回傳404

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Optional() @Inject(RESPONSE) private response: Response
) {
    if (isPlatformServer(this.platformId)) {
        this.response.status(404);
    }
}

好，大功告成

現在能正常回傳404讓SEO去判斷了